<template>
  <div class='container'>
    <div class="articles-container">
      <el-card>
        <el-form :inline="true" ref="form" :model="page" label-width="80px">
         <el-row type="flex" justify="space-between">
           <el-col>
             <el-form-item label="关键字">
               <el-input v-model="page.keyword" placeholder="根据编号送偶所"></el-input>
             </el-form-item>
           </el-col>
           <el-col>
             <el-row type="flex" justify="end">
               <el-col :span="8">
                 <el-form-item>
                   <el-button @click="cancelBtn">清除</el-button>
                   <el-button type="primary" @click="getList">搜索</el-button>
                 </el-form-item>
               </el-col>
             </el-row>
           </el-col>
         </el-row>
        </el-form>

        <el-alert
          :title="`数据一共${page.counts}条`"
          type="info"
          show-icon
          style="margin-bottom: 10px"
        :closable="false">
        </el-alert>

<!--        表格区域-->
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            label="编号"
            prop="id"
            width="220">
          </el-table-column>
          <el-table-column
            prop="questionType"
            label="题型"
            width="80">
            <template v-slot="{row}">
              {{row.questionType==='1'?'单选':row.questionType==='2'?'多选':'简答'}}
            </template>
          </el-table-column>
          <el-table-column
            label="题目编号"
            width="220">
            <template v-slot="{row}">
              <span @click="questionBtn(item.id)" style="display: block;cursor: pointer;color: #3A71A8" v-for="(item,index) in row.questionIDs" :key="index">{{ item.number }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="addTime"
            label="录入时间"
            width="180">
          </el-table-column>
          <el-table-column
            prop="totalSeconds"
            label="答题时间(s)"
          >
          </el-table-column>
          <el-table-column
            prop="accuracyRate"
            label="正确率(%)">
          </el-table-column>
          <el-table-column
            prop="userName"
            label="录入人"
           >
          </el-table-column>
          <el-table-column
            label="操作"
            >
            <template v-slot="{row}">
              <el-button type="danger" icon="el-icon-delete" @click="delBtn(row.id)" plain circle />
            </template>
          </el-table-column>
        </el-table>

<!--        分页区域-->
        <el-row type="flex" justify="end" style="margin-top: 15px">
          <el-col :span="10">
            <PageTool @pageChange="pageChange" @pageSizeChange="pageSizeChange"
                      :total="page.counts" :paginationPage="page.page"
                      :paginationPagesize="page.pagesize"/>
          </el-col>
        </el-row>
      </el-card>

      <QuestionsPreview :showDialog.sync="showDialog" ref="questionRef"/>
    </div>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions'
import PageTool from '@/module-manage/components/page-tool'
import QuestionsPreview from '@/module-hmmm/components/questions-preview'
export default {
  components: {
    QuestionsPreview,
    PageTool
  },
  data () {
    return {
      showDialog: false,
      tableData: [{}],
      page: {
        page: 1,
        pagesize: 10,
        keyword: null,
        counts: null
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    questionBtn (id) {
      console.log(id)
      this.showDialog = true
      this.$refs.questionRef.getDetail({ id })
    },
    cancelBtn () {
      this.page.keyword = null
    },
    async delBtn (id) {
      await this.$confirm('是否删除')
      console.log(id)
      await removeRandoms({ id })
      this.$message.success('删除成功')
      await this.getList()
    },
    pageChange (pageNum) {
      this.page.page = pageNum
      this.getList()
    },
    pageSizeChange (pageSize) {
      this.page.pagesize = pageSize
      this.getList()
    },
    async getList () {
      this.page.page = 1
      const { data } = await randoms(this.page)
      console.log(data)
      this.page.counts = data.counts
      this.tableData = data.items
    }
  }
}
</script>

<style scoped lang='less'>
.articles-container{
  padding: 10px;
}
</style>
